<template>
	<view class="new-users copy-data">
		<view class="mid" style="overflow: hidden;">
			<!-- //flex:1; -->
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="head my-order">

					<!-- 		<view class="order-wrapper">
						<view class="uni-form-item uni-column ">
							<u-search shape="square" v-model="keyword" placeholder="请输入用户名或账号查询"
								@custom="search"></u-search>
						</view>
					</view> -->



					<view class='nav acea-row row-around'>
						<view class='item' :class='orderStatus==null ? "on": ""' @click="statusClick(null)">
							<view>{{$t("withdrawal.all")}}</view>
							<!-- <view class='num'>{{orderData.completeCount || 0}}</view> -->
						</view>
						<view class='item' :class='orderStatus==-1 ? "on": ""' @click="statusClick(-1)">
							<view>{{$t("withdrawal.fail")}}</view>
							<!-- <view class='num'>{{orderData.completeCount || 0}}</view> -->
						</view>
						<view class='item' :class='orderStatus==0 ? "on": ""' @click="statusClick(0)">
							<view>{{$t("withdrawal.review")}}</view>
							<!-- <view class='num'>{{orderData.unPaidCount || 0}}</view> -->
						</view>
						<view class='item' :class='orderStatus==1 ? "on": ""' @click="statusClick(1)">
							<view>{{$t("withdrawal.already-withdrawn")}}</view>
							<!-- <view class='num'>{{orderData.unShippedCount || 0}}</view> -->
						</view>

						<view class='item' @click="filtrate">
							<view><button type="primary" style="padding:3px 15px;">{{$t("withdrawal.screen")}}</button>
							</view>
							<!-- <view class='num'>{{orderData.completeCount || 0}}</view> -->
						</view>

					</view>


					<view class="team-wrapper" v-for="item in list">
						<view class="team_top" @click="navLookDetail(item)">
							<view class="top_box">
								<!-- <view class="img"></view>
								<view> -->
								<view class="get_tit">{{$t("withdrawal.withdrawn")}}</view>
								<!-- :style="{'color':item.status==-1?'red':item.status==0?'#ee9836':'#7cacf8'};" -->
								<view>
									{{item.status==-1?$t("withdrawal.fail"):item.status==0?$t("withdrawal.review"):$t("withdrawal.already-withdrawn")}}
								</view>
								<!-- </view> -->
							</view>

							<view>
								<view class="flex_top1">
									<view class="flex_top">
										<view class="cash">{{$t("withdrawal.amount")}}:</view>
										<view class="info_detail">{{item.extractPrice}}USDT</view>
									</view>

									<view style="font-weight: bold;font-size: 20px;">></view>
								</view>
								<view class="flex_top">
									<view class="cash">{{$t("withdrawal.address")}}:</view>
									<view class="info_detail">{{item.bankAddress}}</view>
								</view>
								<view class="flex_top">
									<view class="cash">{{$t("withdrawal.initiation-time")}}:</view>
									<view class="info_detail">{{item.createTime}}</view>
								</view>
							</view>

						</view>

					</view>
					<view class="" style="display: flex;justify-content: center;color: #ccc;">
						{{$t('order.Nodata')}}
					</view>
				</view>

			</scroll-view>

			<u-popup v-model="isShow" mode="bottom">
				<view class="content">
					<scroll-view scroll-y="true" style="height: 350px;">
						<!-- <view>
								<view v-for="index in 20" :key="index">
									第{{index}}个Item
								</view>-->
						<!-- 	<view class="top_tit">
									<view class="">
										取消
									</view>
									<view class="">
										确定
									</view>
								</view> -->

						<view class="">
							<span class="time_span">{{$t("withdrawal.Time")}}</span>
							<view class="selectTime">
								<view class="startBox" @click="isPicker(1)">

									<view v-if="startTime.day">{{startTime.year+'-'+startTime.month+'-'+startTime.day}}
									</view>
									<view v-else>{{$t("withdrawal.begin-time")}}</view>
									<!-- {{startTime?(startTime.year+'-'+startTime.month+'-'+startTime.day):'起始时间'}} -->
									<!-- <u-input v-model="value" :type="type" border=true style="width: 85%;"/> -->
								</view>
								<!-- <view class="" style="">-</view> -->
								{{$t("withdrawal.to")}}
								<view class="startBox" @click="isPicker(2)">
									<view v-if="stopTime.day">{{stopTime.year+'-'+stopTime.month+'-'+stopTime.day}}
									</view>
									<view v-else>{{$t("withdrawal.end-time")}}</view>

								</view>
								<!-- 	<button  type="default">选</button> -->
							</view>

							<span class="time_span" style="margin-top: 30px;">{{$t("withdrawal.amount")}}</span>
							<view class="selectTime1">
								<view class="flex_inp">

									<u-input v-model="value1" type="Number" :placeholder='minAmount' :border='true'
										style="width: 145px" />
								</view>
								<!-- <view class="" style="">-</view> -->
								{{$t("withdrawal.to")}}
								<view class="flex_inp">
									<u-input v-model="value2" type="Number" :placeholder='maxAmount' :border='true'
										style="width: 145px" />

								</view>

							</view>

						</view>



					</scroll-view>
					<view class="btn_bottom">
						<!-- <view class="confirm_box"> -->
						<button type="default" class="confirmBtn"
							@click="confirmWrite">{{$t("public.confirm")}}</button>
						<!-- </view> -->
						<!-- <view class="confirm_box"> -->
						<button type="default" class="reset" @click="reset">{{$t("withdrawal.reset")}}</button>
						<!-- </view> -->

					</view>
				</view>
			</u-popup>

			<view v-show="isPickerShow">


				<u-picker mode="time" :show-time-tag="false" :params="params" v-model="isPickerShow"
					confirm-color="#2979ff" z-index='99999999' @confirm="bindChange" :confirm-text='confirmText'
					:cancel-text="cancelText"></u-picker>

			</view>

		</view>


		<!-- 	<view class='loadingicon acea-row row-center-wrapper' v-if="list.length>0">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
<view v-if="list.length == 0">
				<emptyPage :title="noData"></emptyPage>
			</view>
</view> -->
		<!-- view class='noCart' v-if="list.length > 0 ">
			<view class='pictrue'>
				<image src='@/static/images/noOrder.png'></image>
			</view>
			<view class="pictrue">
				<view class="" style="display: flex;justify-content: center;color: #ccc;">
					{{this.$t('order.Nodata')}}
					
				</view>
			</view>
		</view> -->





	</view>
</template>
<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import Cache from '@/utils/cache';
	import {
		BACK_URL
	} from '@/config/cache';
	import {
		getMenuList
	} from '@/api/user.js';
	import {
		extractRecord
	} from '@/api/new.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		getCity
	} from '@/api/api.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef H5

	import Auth from '@/libs/wechat';
	// #endif
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	const app = getApp();
	export default {
		components: {
			// #ifdef MP
			authorize
			// #endif
		},
		computed: mapGetters(['isLogin', 'chatUrl', 'userInfo', 'uid']),
		data() {
			return {
				confirmText: this.$t('public.confirm'),
				cancelText: this.$t('public.tips-cancel'),
				noData: this.$t("public.tips.no-data"),
				minAmount: this.$t("withdrawal.min.amount"),
				maxAmount: this.$t("withdrawal.max.amount"),
				loading: false, //是否加载中
				loadTitle: this.$t('public.tips.load-more'), //提示语
				startTime: {},
				stopTime: {},
				isPickerShow: false,
				paramsTatol: {
					page: 1,
					limit: 10
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					// 选择时间的时间戳
					timestamp: true,
				},
				isShow: false,
				showType: null,
				orderMenu: [{
						img: '/static/images/order1.png',
						title: this.$t('user.my-product'),
						url: '/pages/users/order_list/index?status=0',
						num: 0
					},
					{
						img: '/static/images/order2.png',
						title: '我的买单',
						url: '/pages/users/order_list/index?status=1',
						num: 0
					},
					{
						img: '/static/images/order3.png',
						title: '我的卖单',
						url: '/pages/users/order_list/index?status=2',
						num: 0
					},

				],
				activeTxt: 1,

				servicePic: '/static/images/customer.png',
				sysHeight: sysHeight,
				// #ifdef MP
				pageHeight: '100%',
				// #endif
				// #ifdef H5
				pageHeight: app.globalData.windowHeight,
				// #endif
				// #ifdef H5
				isWeixin: Auth.isWeixin(),
				//#endif
				keyword: '',
				orderStatus: null, //订单状态
				page: 1,
				limit: 20,
				value1: '',
				value2: '',
				Picker: 1,
				isShow: false,
				list: [],
				goodScroll: true

			}
		},
		onLoad(e) {
			let that = this;
			// #ifdef H5
			that.$set(that, 'pageHeight', app.globalData.windowHeight);
			// #endif
			// console.log(e.type, 'eeeeeeee');
			// this.showType = e.type
			// if (e.type == 1) {	
			// 	uni.setNavigationBarTitle({
			// 		title: '直拓团队'
			// 	})
			// } else if (e.type == 2) {
			// 	uni.setNavigationBarTitle({
			// 		title: '间拓团队'
			// 	})
			// } else {
			// 	uni.setNavigationBarTitle({
			// 		title: '团队人数'
			// 	})
			// }

		},
		onShow: function() {
			let that = this;
			uni.setNavigationBarTitle({
				title: this.$t('withdrawal.detail.title')
			})
			// 		uni.getSystemInfo({
			// 			success: function(res) {
			// 				that.pageHeight = res.windowHeight + 'px'
			// 			}
			// 		});
			this.getList()
		},
		methods: {
			navLookDetail(e) {
				uni.setStorageSync("detail", e)

				uni.navigateTo({
					url: './reason'
				})
			},
			//重置
			reset() {
				this.startTime = ''
				this.stopTime = ''
				this.value1=''
				this.value2=''
			},
			//确定
			confirmWrite() {
				this.Picker == 1
			
				let that = this
				// if (this.value2 == '' && this.value1 == '') {
				// 	return that.$util.Tips({
				// 		title: this.$t("withdrawal.supplement-price")
				// 	});

				// } else {}
				this.paramsTatol.page = 1
				this.goodScroll = true
				this.getList()
					this.startTime = ''
					this.stopTime = ''
					this.value1=''
					this.value2=''
					this.isShow = false
					
					
					
				



			},
			getList() {

				//TODO
				
				if (this.value2 && this.value1) {
					this.value3 = this.value1 + '-' + this.value2
				}
				if (this.stopTime) {
		
					let stopTime = this.stopTime.year + '-' + this.stopTime.month + '-' + this.stopTime.day
					let startTime = this.startTime.year + '-' + this.startTime.month + '-' + this.startTime.day
					if (startTime && stopTime) {
						this.RangeTime = startTime + ',' + stopTime
			
					} else if (startTime) {
						let time = startTime
					}
				}



				let that = this
				that.loadTitle = this.$t('public.tips.load-more');
				let data = {
					dateLimit: this.RangeTime?this.RangeTime:'',
					status: this.orderStatus,
					price: this.value3,
					page: this.paramsTatol.page,
					limit: this.paramsTatol.limit
				}
				console.log(data, 'data');
				if (!this.goodScroll) return
				extractRecord(data).then(res => {
					console.log(res, 'res');

					this.paramsTatol.page++
					this.goodScroll = res.data.list.length >= this.paramsTatol.limit

					this.list = [...this.list, ...res.data.list]


					// that.loadTitle = loadend ? "我也是有底线的" : '加载更多';

				}).catch(err => {
					that.loading = false;
					that.loadTitle = this.$t('public.tips.load-more');
				})
			},
			bindChange(e) {
				console.log(e, 'eeeee');
				if (this.Picker == 1) {
					this.startTime = e
				} else {
					// if(e.year<this.startTime.year) return this.$util.Tips({
					// 	title:"123"
					// })

					// if(e.year<this.startTime.year) return this.$util.Tips({
					// 	title:"123"
					// })
					this.stopTime = e
					
				}

			},
			isPicker(e) {
				this.Picker = e
				this.isPickerShow = true
				console.log(e, 'mmmmmm');

			},
			filtrate() {
				this.isShow = true

			},
			/**
			 * 切换类型
			 */
			statusClick: function(status) {
				if (status == this.orderStatus) return;
				this.orderStatus = status;
				console.log(this.orderStatus);
				this.goodScroll = true
				this.paramsTatol.page = 1

				this.list = []
				this.loadend = false;
				this.page = 1;
				// this.$set(this, 'orderList', []);
				// this.getOrderList();
				this.getList()
			},
			goToDetail() {
				console.log('123');
				let id = 1

				uni.navigateTo({
					url: '/pages/users/order_list/buy_out?id=' + id
				})
			},
			search() {

				console.log('搜索了', this.keyword);
			},
			clickDetail(e) {
				uni.navigateTo({
					url: '/pages/my_team/team_detail/index?type=' + e
				})
			},
			getTeam() {
				this.activeTxt = 1
			},
			getCash() {
				this.activeTxt = 2
			},

			goDetails(item) {
				uni.navigateTo({
					url: '/pages/users/user_address_list/index'
				})
			},



		},
		onReachBottom() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
	}

	.noCart {
		margin-top: 171rpx;
		padding-top: 0.1rpx;
	}

	.noCart .pictrue {
		width: 414rpx;
		height: 336rpx;
		margin: 78rpx auto 56rpx auto;
	}

	.noCart .pictrue image {
		width: 100%;
		height: 100%;
	}

	.my-order .nav {
		background-color: #fff;
		// width: 690rpx;
		// height: 140rpx;
		border-radius: 14rpx;
		    display: flex;
		    align-items: center;
		// margin: -60rpx auto 0 auto;
	}

	.time_span {
		display: flex;
		// align-items: center;
		justify-content: start;
		margin-left: 10px;
		font-size: 18px;
		font-weight: bold;
	}

	.selectTime {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 15px;
		padding: 0 10px;

		.startBox {
			border: 1px solid #ccc;
			width: 145px;
			height: 35px;
			line-height: 35px;
		}

	}

	.get_tit {
		font-size: 18px;
		font-weight: bold;
	}

	.btn_bottom {
		display: flex;
		height: 45px;

		color: #fff;
		text-align: center;

		.confirm_box {
			width: 50%;
		}

		.confirmBtn {

			line-height: 45px;
			color: #fff;
			width: 50%;
			background-color: #70b603;
		}

		.reset {
			line-height: 45px;

			width: 50%;
			color: #fff;
			background-color: #169bd5;

		}
	}

	.selectTime1 {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 15px;
		padding: 0 10px;

		.flex_inp {
			display: flex;
			justify-content: center;
		}
	}

	.my-order .nav .item {
		text-align: center;
		// font-size: 26rpx;
		color: #282828;
		padding: 10rpx 0;
	}

	.my-order .nav .item.on {
		// font-weight: bold;
		// border-bottom: 5rpx solid #e93323;
		/* #ifdef H5 || MP */
		font-weight: bold;
		/* #endif */
		border-bottom: 5rpx solid $theme-color;
	}

	.my-order .nav .item .num {
		margin-top: 18rpx;
	}

	.content {
		padding: 24rpx;
		text-align: center;

		.top_tit {
			height: 30px;
			background-color: aqua;
		}
	}

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 420rpx;
		background-image: url('~@/static/images/user_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.contenBox {
		// padding: 0 30rpx;
	}

	.left1 {
		color: #282828;
		font-size: 34rpx;
		font-weight: 600;
		margin: 5px 0;
	}

	.support {
		width: 219rpx;
		height: 74rpx;
		margin: 54rpx auto;
		display: block;
	}

	.title_top {
		display: flex;
		justify-content: center;
		align-items: center;

		.title_center {
			padding: 20px;
			// padding: 20px 0 0;
			font-size: 32rpx
		}
	}

	.new-users {
		display: flex;
		flex-direction: column;
		height: 100%;

		.sys-head {
			position: relative;
			width: 100%;
			background: linear-gradient(90deg, $bg-star1 0%, $bg-end1 100%);

			.sys-title {
				z-index: 10;
				position: relative;
				height: 43px;
				text-align: center;
				line-height: 43px;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}

		.head {
			// background: linear-gradient(360deg, rgba(255, 121, 49, 0) 0%, rgba(248, 74, 29, 0.82) 39%, #E93323 100%);
			// padding: 0 30rpx;

			.user-card {
				position: relative;
				width: 100%;
				margin: 0 auto;

				// padding: 25rpx 0 0rpx 0;
				.user-info {
					z-index: 20;
					position: relative;
					display: flex;
					// align-items: center;
					padding: 0 0 16px;

					.avatar {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}

					.info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;
						// padding: 15rpx 0;

						.name {
							// display: flex;
							// align-items: center;
							color: #000;
							font-size: 31rpx;
							font-weight: bold;

							.vip {
								display: flex;
								align-items: center;
								padding: 6rpx 20rpx;
								background: rgba(0, 0, 0, 0.2);
								border-radius: 18px;
								font-size: 20rpx;
								margin-left: 12rpx;

								image {
									width: 27rpx;
									height: 27rpx;
								}
							}
						}

						.invite {
							display: flex;
							align-items: center;
							justify-content: space-between
						}

						.tit {
							font-size: 14px;
							color: #000;
							margin-right: 8px;
						}

						.num {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							// color: rgba(255, 255, 255, 0.6);

							image {
								width: 22rpx;
								height: 23rpx;
								margin-left: 20rpx;
							}
						}
					}

					.setting {
						width: 45rpx;
						height: 45rpx;
					}

				}

				.myBuy {
					font-size: 16px;
					font-weight: bold;
					margin: 10px 5px 0;
				}


				.sign {
					z-index: 200;
					position: absolute;
					right: -12rpx;
					top: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120rpx;
					height: 60rpx;
					background: linear-gradient(90deg, rgba(255, 225, 87, 1) 0%, rgba(238, 193, 15, 1) 100%);
					border-radius: 29rpx 4rpx 4rpx 29rpx;
					color: #282828;
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.num-wrapper {
				z-index: 30;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20;
				color: #fff;
				// background: rgba(248, 74, 29, 0.82) ;
				background-image: url('~@/static/images/user_bg.png');
				background-repeat: no-repeat;
				background-size: 100% 150%;

				// padding: 2px 5px 20px;
				border-radius: 15px;

				.num-item {
					width: 50%;
					text-align: center;
					padding: 0 0 10px;

					.num {
						font-size: 42rpx;
						font-weight: bold;


						// 123
					}

					.txt_flex {
						display: flex;
						padding: 0 5px;
						justify-content: space-between;

						.txt {
							margin-top: 10rpx;
							font-size: 26rpx;
							color: rgba(255, 255, 255, 0.6);
						}

						.txt_right {
							font-size: 26rpx;
							color: #169bd5;
						}
					}

					.flex_btn {
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 0 5px;

						.num {
							margin-bottom: 8px;
						}

					}

					.txt_btn {
						display: flex;
						flex-direction: column;
						align-items: center;
						// padding: 0 5px;
						padding: 15px 0 0px;

						.num {
							margin-bottom: 8px;
						}
					}
				}
			}

			.left {
				color: #282828;
				font-size: 34rpx;
				font-weight: 600;
				margin: 5px 0;
			}

			.order-wrapper {
				background-color: #fff;
				border-radius: 14rpx;
				padding: 20rpx;
				margin: 15px 0 0;

				// position: relative;
				// z-index: 11;
				.uni-column {
					display: flex;

				}

			}


			.team_txt {
				padding: 20px 10px 0;
				display: flex;
				font-size: 24px;
				font-weight: bold;

				.team {
					margin-right: 25px;
				}

				.fifter {
					opacity: 0.5;
				}
			}

			.team-wrapper {
				background-color: #fff;
				// border-radius: 14rpx;
				padding: 0 16rpx 16rpx;
				margin: 10px 0;

				.team_top {
					display: flex;
					flex-direction: column;
					justify-content: start;
					padding: 15px 0 0;
					margin: 10px 0;

					.top_box {
						display: flex;
						// justify-content: center;
						justify-content: space-between;
						align-items: center;

						.img {
							background-color: aqua;
							width: 35px;
							height: 35px;
							margin-right: 10px;
						}
					}

					.flex_top1 {
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					.flex_top {
						display: flex;
						// justify-content: space-between;
						width: 100%;
						align-items: baseline;

						// padding-bottom: 15px;
						.cash {
							// font-weight: bold;
							padding: 10px 0 5px
						}

						.info_detail {
							margin-left: 10px;
							color: #aaa;
						}
					}

					.cash_num {
						padding: 10px;

						.price {
							margin-bottom: 14px;
							font-weight: bold;
							font-size: 18px;
						}
					}



				}
			}
		}

		.slider-wrapper {
			margin: 20rpx 0;
			height: 138rpx;

			swiper,
			swiper-item {
				height: 100%;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.user-menus {
			background-color: #fff;
			border-radius: 14rpx;

			.menu-title {
				padding: 30rpx 30rpx 40rpx;
				font-size: 30rpx;
				color: #282828;
				font-weight: 600;
			}

			.list-box {
				display: flex;
				flex-wrap: wrap;
				padding: 0;
			}

			.item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: column;
				width: 25%;
				margin-bottom: 47rpx;
				font-size: 26rpx;
				color: #333333;

				image {
					width: 52rpx;
					height: 52rpx;
					margin-bottom: 18rpx;
				}


				&:last-child::before {
					display: none;
				}
			}

			button {
				font-size: 28rpx;
			}
		}

		.phone {
			color: #fff;
		}

		.order-status-num {

			min-width: 12rpx;
			background-color: #fff;
			color: #ee5a52;
			border-radius: 15px;
			position: absolute;
			right: -14rpx;
			top: -15rpx;
			font-size: 20rpx;
			padding: 0 8rpx;
			border: 1px solid #ee5a52;
		}
	}
</style>